<template>
	<view>
		<!-- 选项卡 -->
		<view class="d-flex bg-white a-center font-md text-muted border-top border-bottom border-light-secondary">
			<view class="flex-1 d-flex a-center j-center py-2"
			v-for="(item,index) in tabBars" :key="item.name"
			:class="tabIndex === index ? 'tabactive' : ''"
			@click="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		<view class="row" v-if="dataList.length>0">
			<view  v-for="item in dataList" :key="item.id"  class="bg-white machiene-item rounded">
				<view class="title">
				  <view v-if="item.cgMaterial">{{item.cgMaterial.name}}</view>
				  <view class="font-sm" :class="item.isSign===1?'text-success':'text-danger'">{{item.isSign===1?'已签收':'待签收'}}</view>
				</view>
				<view class="des">
				  <view>
					<view class="des-item" v-if="item.shCustomerInfo">浆站：{{item.shCustomerInfo.name}}</view>
					<view class="des-item cl-635454" v-if="item.cgMaterial">
					  <view v-if="item.cgMaterial.type">规格型号：{{item.cgMaterial.type}}</view>
					  <view v-if="item.cgMaterial.texture">材质:{{item.cgMaterial.texture}}</view>
					</view>
					<view class="des-item">
					  <view v-if="item.batch">批号：{{item.batch}}</view>
					  <view v-if="item.code">编号：{{item.code}}</view>
					</view>
					<view class="des-item text-warning"  v-if="item.isSign===1">库存：{{item.remain}}</view>
					<view class="des-item cl-635454">发货数量：{{item.nums}}</view>
					<view class="border-dashed-top position-relative py-2"  v-if="item.isSign===1">
						<view class="cl-635454 d-flex j-sb">
						  <view>签收人：{{item.signerName}}</view>
						  <view>签收数量：{{item.autNums}}</view> 
						</view>
						<view class="cl-635454"  v-if="item.isSign===1">签收时间：{{item.signTime}}</view>
						<view class="position-absolute iconfont icon-yiqianshou bottom-yiqianshou" v-if="item.isSign===1"></view>
					</view>
				  </view>
				</view>
				<view class="py-2 d-flex j-end border-dashed-top">
					<view class="border main-rounded-circle border-orange text-orange px-2 " @click="optionHandle(item,'detail')" >查看详情</view>
					<view class="border main-rounded-circle border-orange text-orange px-2 ml-1" @click="optionHandle(item,'sign')" v-if="jzUser&&!item.isSign">签收</view>
				</view>
				<!-- 底部 -->
				<view class="text-light-muted border-dashed-top d-flex j-sb  pt-1">
				  <view class="font-sm">创建者：{{item.creatorName}}</view>
				  <view class="font-sm">创建时间：{{item.createTime}}</view>
				</view>
			</view>
		</view>
		<!-- 没有数据 -->
		
		<view class="d-flex a-center j-center text-light-muted font-sm py-3" v-if="dataList.length>0">
			{{loadtext}}
		</view>
		<no-thing v-else :msg="tabBars[tabIndex].msg"></no-thing>
		
		<!-- 填写签收数量 -->
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip bg-white pt-2">
				<view class="text-center px-2 font-weight font-md">签收数量</view>
				<view class="p-2">
					<input class="border p-2 w-100 d-block line-h border-box input-defind rounded font-sm"
					 :class="focusClass.autNums ? 'input-border-color' : ''"
					placeholder-class="text-light-muted" type="number"
					 @focus="focus('autNums')" @blur="blur('autNums')"
					 placeholder="请输入实际签收数量"
					v-model="model.autNums"/>
					<view class="text-danger" v-if="error.autNums">{{error.autNums}}</view>
				</view>
		
				<view class="d-flex j-sb">
					<view class="flex-1 py-2 text-center text-light-muted" @click="cancel('cancel')">取消</view>
					<view class="flex-1 py-2 text-center bg-danger text-white" @click="cancel('confirm')">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import noThing from '@/components/common/no-thing.vue';
	import api from '@/common/api/api.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components:{
			noThing,
			uniPopup
		},
		props:{
			jyRepair:{
				type:Boolean,
				default:false
			},
			jzUser:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				model:{
					autNums:'',
					id:-1
				},
				focusClass:{
					autNums:false
				},
				error:{
					autNums:''
				},
				dataList:[],
				loadtext:'没有更多了',
				tabIndex:0,
				more:0,
				tabBars:[
					{ 
						name:"全部",
						msg:"你还没有添加零件",
						state:null
					},
					{
						name:"待签收",
						msg:"你还没有已签收零件",
						state:0
					},
					{
						name:"已签收",
						msg:"你还没有已签收零件",
						state:1
					}
				],
				pagination:{
					currentPage:1,
					pageSize:6
				},
				keyword:""
			}
		},
		created() {
			this.init();
			/**注册搜索事件*/ 
			this.eventSearchBtn()
		},
		methods: {
			focus(key){
				this.focusClass[key] = true
			},
			blur(key){
				this.focusClass[key] = false
			},
			init(){
				this.dataList=[];
				this.pagination.currentPage=1;
				this.getList(false)
			},
			eventSearchBtn(){
				this.$on("searchMethod",(vlaue)=>{
					this.keyword = vlaue;
					this.init()
				})
			},
			getList(refresh = true, callback = false){
				let self = this;
				let postData={
					...self.pagination,
					keyword:self.keyword,
					isSign:self.tabBars[self.tabIndex].state
				}
				self.$H.post(api.materialList,postData).then(res=>{
					self.dataList = refresh? [...res.content.records]:[...self.dataList,...res.content.records];
					// 恢复加载状态
					self.loadtext = res.content.total > self.pagination.pageSize*self.pagination.currentPage ? '上拉加载更多' : '没有更多了';
				})
			},
			/**上拉刷新*/ 
			pullUpRefresh(){
				// 是否已经处于加载状态
				if (this.loadtext !== '上拉加载更多') return;
				// 改变加载状态
				this.loadtext = '加载中...'
				this.pagination.currentPage++
				// 请求数据
				this.getList(false)
			},
			// 获取备件列表
			changeTab(index){
				this.tabIndex = index;
				this.init()
			},
			optionHandle(item,type){
				let self = this;
				switch(type){
					case 'detail':
					uni.navigateTo({
						url:`/pages/materialDetail/materialDetail?id=${item.id}`
					})
					break;
					case 'sign':
					this.model.id = item.id;
					this.model.autNums='';
					this.error.autNums="";
					this.$refs.showtip.open()
					break;
				}
			},
			cancel(type){
				let self = this;
				if(type==='confirm'){
					if(self.model.autNums===''){
						self.error.autNums="请输入实际签收数量"
						return
					}
					if(self.model.autNums <= 0){
						self.error.autNums="签收数量不能小于或等于0"
						return
					}
					
					let postData = {
					      id:this.model.id,
					      autNums: self.model.autNums,
					      isSign: 1
					    }
						this.$refs.showtip.close()
						uni.showLoading({
							title:'数据提交中'
						})
						self.$H.post(api.updateMaterial,postData).then(res=>{
							uni.showToast({
								title:'签收成功',
								icon:'success'
							})
							self.init();
							uni.navigateBack()
						})
				}else{
					this.$refs.showtip.close()
				}
				
				
			}
		}
	}
</script>

<style scoped>
.machiene-item{
  width:670upx;
  margin:20upx auto;
  padding:20upx;
  overflow: hidden;
}
.machiene-item .title{
  font-size: 32rpx;
  line-height: 1.6;
  padding-bottom:24rpx;
  margin-bottom:24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ede9ea;
}
.machiene-item .des{
  font-size: 26rpx;
}
.machiene-item .des-item{
  display: flex;
  justify-content: space-between;
  margin-bottom:16rpx;
}
.machiene-item  .bottom-yiqianshou{
	font-size: 180upx;
	bottom: -180upx;
	left:-50upx;
	color:rgba(40,167,69,.5)
}
/* 提示窗口 */
.uni-tip{
	width: 300px;
	border-radius: 10px;
}
</style>
